<template>
    <div class="user-credit-report-user-info">
        <ul class="steps">
            <li class="steps__item active">
                <span>1</span>
                <p>个人信息</p>
            </li>
            <li class="steps__item">
                <span>2</span>
                <p>芝麻信用</p>
            </li>
            <li class="steps__item">
                <span>3</span>
                <p>运营商</p>
            </li>
            <li class="steps__item">
                <span>4</span>
                <p>京东</p>
            </li>
        </ul>
        <p class="tips">有借为您的信息提供安全加密，不会泄漏给第三方</p>

        <div class="big-title">个人基本信息</div>
        <div class="form-wrap">
            <ul class="form-box">
                <li class="form__item disabled">
                    <span class="form__key">姓名</span>
                    <div class="form__value">
                        <span class="item"> {{name || placeholder}} </span>
                    </div>
                </li>
                <li class="form__item disabled">
                    <span class="form__key">身份证号码</span>
                    <div class="form__value">
                        <span class="item"> {{idNumber | idNumber}} </span>
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">微信号</span>
                    <div class="form__value">
                        <input v-model='weixinNo' type="text" placeholder="请输入常用微信账号">
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">所在城市</span>
                    <div class="form__value">
                        <city
                            :select-city='cityInfo.name'
                            @set='setCity' >
                        </city>
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">详细地址</span>
                    <div class="form__value">
                        <input v-model='address' type="text" placeholder="街道/小区/门牌号等">
                    </div>
                </li>
            </ul>
        </div>

        <div class="big-title">紧急联系人信息</div>
        <div class="form-wrap">
            <ul class="form-box">
                <li class="form__item detail">
                    <span class="form__key">紧急联系人一</span>
                    <div class="form__value">
                        <input v-model='contact1Name' type="text" placeholder="请输入姓名">
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">联系人手机号码</span>
                    <div class="form__value">
                        <input v-model='contact1Mobile' type="tel" placeholder="请输入">
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">与我的关系</span>
                    <div class="form__value">
                        <picker-list key='contact1Relation' picker-id='contact1Relation' :list='relationList1' v-model='contact1Relation'></picker-list>
                    </div>
                </li>
            </ul>
            <ul class="form-box">
                <li class="form__item detail">
                    <span class="form__key">紧急联系人二</span>
                    <div class="form__value">
                        <input v-model='contact2Name' type="text" placeholder="请输入姓名">
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">联系人手机号码</span>
                    <div class="form__value">
                        <input v-model='contact2Mobile' type="tel" placeholder="请输入">
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">与我的关系</span>
                    <div class="form__value">
                        <picker-list key='contact2Relation' picker-id='contact2Relation' :list='relationList2' v-model='contact2Relation'></picker-list>
                    </div>
                </li>
            </ul>
        </div>

        <span class="button long confirm" @click="submitUserInfo">确认无误，下一步</span>
        <contact></contact>



        <!-- <modal 
            :show='show_warning'
            :maskClose='false'>
            <div class="modal-bind-card-warning">
                <p>感谢您选择有借，基于风控考虑，在有借进行借款／出借业务的用户，须年满22周岁。为您带来不便，请谅解。</p>
                <div class="modal-bind-card__button"><span @click='show_warning = false'>关闭</span></div>
            </div>
        </modal> -->
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import contact from '../components/Contact.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import city from '../components/City.vue'
    import idNumber from '../filters/filter-idNumber'
    import relationList from '../data/relationList'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userCreditReportUserInfoValidation } from '../validation/validation'
    import { reportApi, userApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            city,
            contact,
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        filters:{
            idNumber
        },
        data() {
            return {
                creditReportNo:this.$route.params.no,
                placeholder:'--',
                cityInfo : {
                    cityName:'杭州',
                    provName:'浙江'
                },
                relationList1:relationList,
                relationList2:relationList,
                name:'',
                idNumber:'',
                weixinNo:'',
                address:'',
                contact1Name:'',
                contact1Mobile:'',
                contact1Relation:'',
                contact2Name:'',
                contact2Mobile:'',
                contact2Relation:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            submitUserInfo(){
                let params = {
                    creditReportNo:this.creditReportNo,
                    name:this.name,
                    province:this.cityInfo.provName,
                    city:this.cityInfo.cityName,
                    idNumber:this.idNumber,
                    weixinNo:this.weixinNo,
                    address:this.address,
                    contact1Name:this.contact1Name,
                    contact1Mobile:this.contact1Mobile,
                    contact1Relation:this.contact1Relation,
                    contact2Name:this.contact2Name,
                    contact2Mobile:this.contact2Mobile,
                    contact2Relation:this.contact2Relation,
                }
                if(!userCreditReportUserInfoValidation(params,this.userInfo.user.mobile)) return

                this.showLoading()
                reportApi.submitUserInfo(params)
                .then(result=>{
                    this.setMsgTip({
                        text:'个人信息提交成功',
                        type:'success'
                    })
                    this.hideLoading()
                    this.$router.push({
                        name:'user-credit-report-zmxy',
                        params:{
                            no:this.creditReportNo
                        }
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goUserBindCardTransactionPassword(){
                this.$router.push({
                    name:'user-bind-card-transaction-password',
                    params:{
                        no:this.creditReportNo
                    }
                })
            },
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            withDrawAll(){
                this.withDrawMoney = 600
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            setCity(cityInfo){
                this.cityInfo = cityInfo
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
        },
        created(){

            this.name = this.userInfo.user.realName
            this.idNumber = this.userInfo.user.idNumber
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-credit-report-user-info{
        .tips{
            @extend %font-caption;
            padding: 8px 24px;
        }
        .form-box{
            margin-top: 0;
            margin-bottom: 16px;
            &:last-child{
                margin-bottom: 8px;
            }
        }
    }

</style>
